// 响应式断点
@mixin sm {
  @media (min-width: $breakpoint-sm) {
    @content;
  }
}

@mixin md {
  @media (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin lg {
  @media (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin xl {
  @media (min-width: $breakpoint-xl) {
    @content;
  }
}

@mixin xxl {
  @media (min-width: $breakpoint-2xl) {
    @content;
  }
}

// 小于断点
@mixin max-sm {
  @media (max-width: ($breakpoint-sm - 1)) {
    @content;
  }
}

@mixin max-md {
  @media (max-width: ($breakpoint-md - 1)) {
    @content;
  }
}

@mixin max-lg {
  @media (max-width: ($breakpoint-lg - 1)) {
    @content;
  }
}

@mixin max-xl {
  @media (max-width: ($breakpoint-xl - 1)) {
    @content;
  }
}

// 弹性布局
@mixin flex($direction: row, $align: center, $justify: flex-start) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
}

// 卡片样式
@mixin card {
  background-color: $bg-primary;
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  transition: transform $transition-normal, box-shadow $transition-normal;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: $shadow-lg;
  }
}

// 渐变背景
@mixin gradient($direction: to right, $start-color: $primary-light, $end-color: $primary-color) {
  background-image: linear-gradient($direction, $start-color, $end-color);
}

// 多行文本截断
@mixin line-clamp($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 单行文本截断
@mixin text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 水平居中
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 圆形
@mixin circle($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
}

// 按钮基础样式
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $space-2 $space-4;
  border-radius: $radius-md;
  font-weight: $font-medium;
  cursor: pointer;
  transition: all $transition-fast;
  outline: none;
  border: none;
}

// 滚动条样式
@mixin scrollbar($width: 8px, $track-color: $gray-200, $thumb-color: $gray-400) {
  &::-webkit-scrollbar {
    width: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $radius-full;
    
    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}

// 阴影悬浮效果
@mixin hover-shadow {
  transition: box-shadow $transition-fast;
  
  &:hover {
    box-shadow: $shadow-lg;
  }
}

// 响应式容器
@mixin container {
  width: 100%;
  max-width: $content-width;
  margin: 0 auto;
  padding: 0 $space-4;
} 